<template>
  <div class="content">
    <div class="title-icon f-c-c">
      <div class="el-image" style="width:400px;height:200px">
        <img class="el-image__inner" src="../assets/search-icon.png" alt="" style="object-fit: contain;">
      </div>
    </div>
    <!-- 分割线 -->
    <div class="content advertise">
      <div class="el-image" style="width:830px;height:120px">
        <img src="../assets/xuexi.png" alt="" class="img_inner">
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="serch-box f-c-c">
      <input type="text" placeholder="请输入内容!" v-model="inputbox" @keyup.enter="getSearch" spellcheck="fales"
        class="search-input" data-ms-editor="true">
        <i v-if="inputbox" class="el-icon clear-button" style="font-size: 16px; color: gray;" @click="clearInput">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"></path>
          </svg>
        </i>
      <div class="serch-btn f-c-c" @click="getSearch">
        <!-- <i class="el-icon-search"></i> -->
        <img src="../assets/input-search.png" alt="" style="width: 18px; height: 18px" />
        搜索
      </div>
    </div>
    <!-- 新闻内容 -->
    <div class="news-box">
      <div class="f-c-c" v-for="item in searchlist" :key="item.id" @click="getpush(item.id)">
        <div class="search-content f-c-sb">
          <div class="right-content" style="width:830px;">
            <div class="right-content-title">{{ item.title }}</div>
            <div class="news-footer f-c-sb" style="width:100%;">
              <div class="news-footer-left">{{ item.source }}</div>
              <div class="news-footer-right f-c-st"></div>
            </div>
          </div>
        </div>
      </div>
      <loading v-show="searchlist.length == 0" ></loading>
      <div class="pagination-container f-c-c" v-if="total > 10 ? true : false">
        <el-pagination @current-change="handeCurrent" :current-page="params.pageNum" :page-size="params.pageSize"
          layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <top-button></top-button>
    <bottom></bottom>
  </div>
</template>
<script>
import { getRecommend, getSearchTitle } from '../api/index'
import Bottom from '../components/bottom.vue'
import TopButton from '../components/top-button.vue'
import Loading from '../components/loading.vue'
export default {
  components: {
    Bottom,
    TopButton,
    Loading
  },
  data() {
    return {
      inputbox: '',
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      searchlist: [],
      total: 0
    }
  },
  created() {
    let data = this.params
    data.type = 1
    getRecommend(data).then(async res => {
      this.searchlist = await res.rows
    })
  },
  methods: {
    clearInput(){
      this.inputbox = ''
    },
    getpush(value) {
      this.$router.push({ path: '/NewsDetails', query: { tid: value } })
    },
    getSearch() {
      this.searchlist.splice(0)
      let data = this.params
      data.title = this.inputbox
      getSearchTitle(data).then(async res => {
        this.searchlist = await res.rows
        this.total = await res.total
      })
    },
    handeCurrent(value) {
      this.searchlist.splice(0)
      this.params.pageNum = value;
      // 改变之后就要重新获取数据
      this.getSearch();
    },
  },
  updated() {
    this.$toTop()
  }
}
</script>

<style lang="less" scoped>

.content {
  width: 830px;
  margin: 0 auto;

  .title-icon {
    margin-top: 70px;

    .el-image {
      position: relative;
      display: inline-block;
      overflow: hidden;

      .el-image__inner {
        vertical-align: top;
      }
    }
  }

  .advertise {
    width: 830px;
    position: relative;

    .el-image {
      display: inline-block;
      position: relative;
      overflow: hidden;

      .img_inner {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: top;
      }
    }
  }

  .serch-box {
    margin: 41px 0 20px;
    position: relative;

    .search-input {
      width: 668px;
      height: 54px;
      outline: none;
      padding-left: 20px;
      background-color: #ffffff;
      border: solid 1px #bfbfbf;
      font-family: NotoSansHans-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 22px;
      letter-spacing: 0px;
      color: #080808;
    }

    .clear-button{
      position: absolute;
      top: 21px;
      right: 175px;
      cursor: pointer;
    }

    .serch-btn {
      width: 165px;
      height: 58px;
      background-color: #ba0825;
      font-family: NotoSansHans-Bold;
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 22px;
      letter-spacing: 0px;
      color: #ffffff;
      cursor: pointer;

      .el-icon-search {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        font-family: element-icons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }

      .el-icon-search::before {
        contain: "\E778";
      }
    }


  }

  .news-box {
    .search-content {
      cursor: pointer;
      width: 830px;

      .right-content {
        border-bottom: 1px solid #f4f4f4;

        .right-content-title {
          width: 100%;
          font-family: NotoSansHans-Bold;
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 68px;
          letter-spacing: 0px;
          color: #000000;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap
        }

        .news-footer {
          height: 40px;
          font-family: NotoSansHans-Regular;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40px;
          letter-spacing: 0px;
          color: #808080;
        }
      }
    } 

    .pagination-container {
      margin: 32px 16px;
    }
  }
}
</style>
